<template>
  <div class="ui-con-box">
    <h2>Radio单选框</h2>
    <h5>在一组备选项中进行单选</h5>
    <h3>基础用法</h3>
    <h5>由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。</h5>
   <div class="ui-message-show mb60">
      <div class=" ui-msg-pd40">
       <form action="#" class="ng-pristine ng-valid">
                      
                        <input class="rob-radio-with-gap" name="group2" type="radio" id="test4" checked="checked">
                        <label class="mr30" for="test4">间隔</label>
                        <input class="rob-radio-with-gap" name="group2"  type="radio" id="test5">
                        <label for="test5">间隔-选中</label>
                  
                    </form> 
      </div>
      <transition name="fade">
        <div class="ui-meta" v-show="isDivShow[0]">
        <div class="ui-description">
        
            <pre>
            <code class="language-markup">
                <script type="prism-html-markup">
    <input class="rob-radio-with-gap" name="group2" type="radio" id="test4" checked="checked">
    <label class="mr30" for="test4">间隔</label>
    <input class="rob-radio-with-gap" name="group2"  type="radio" id="test5">
    <label for="test5">间隔-选中</label>
                </script>
            </code>
            </pre>
           
        </div>
        <div class="ui-highlight-code">
          <code>
                radio
          </code>
        </div>
      </div>
      </transition>
      <div @click="targetBtn(0)" class="ui-message-show-code">&#9660;{{btnText[0]}}</div>
    </div>
   

   <h3>基础用法</h3>
    <h5>由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。</h5>
    <div class="ui-message-show mb60">
      <div class=" ui-msg-pd40">
       <form action="#" class="ng-pristine ng-valid">
                      
                        <input class="rob-radio-with-gap" name="group2" checked="checked" disabled type="radio" id="test4">
                        <label class="ui-msg-col mr30" for="test4">间隔</label>
                       
                        <input class="rob-radio-with-gap" name="group3" disabled  type="radio" id="test4">
                        <label for="test4">间隔-选中</label>
                  
                    </form>
      </div>
      <transition name="fade">
        <div class="ui-meta" v-show="isDivShow[1]">
        <div class="ui-description">
        
          <pre>
          <code class="language-markup">
              <script type="prism-html-markup">
    <input class="rob-radio-with-gap" name="group2" checked="checked" disabled type="radio" id="test4">
    <label class="ui-msg-col mr30" for="test4">间隔</label>

    <input class="rob-radio-with-gap" name="group3" disabled  type="radio" id="test4">
    <label for="test4">间隔-选中</label>
              </script>
          </code>
          </pre>
           
        </div>
        <div class="ui-highlight-code">
          <code>
                radio
          </code>
        </div>
      </div>
      </transition>
      <div @click="targetBtn(1)" class="ui-message-show-code">&#9660;{{btnText[1]}}</div>
    </div>

  </div>
</template>
<style lang="css" scoped>
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
  background: #fff!important;
}
[type="radio"].rob-radio-with-gap:checked + label:after {
    border: 2px solid #006cff;
    background-color: #3175ff;}
    [type="radio"]:checked + label:after {
    border: 2px solid #3074ff;
    background-color: #35baff;}
    [type="radio"].rob-radio-with-gap:checked + label:before {
    border: 2px solid #2d80ff;
}
[type="radio"]:disabled:not(:checked) + label:before{
   background-color: transparent;
}
[type="radio"]:disabled:checked + label:after {
  background-color: #cecece;
  border-color: #cecece;
  border: 2px solid #cecece;
  cursor: not-allowed; }
  [type="radio"].rob-radio-with-gap:disabled:checked + label:before{
border: 2px solid #cecece;
  }

[type="radio"]:disabled + label {
  color: #cecece;
  cursor: not-allowed; }

[type="radio"]:disabled:not(:checked) + label:hover:before {
  border-color: #cecece; }
</style>

<script type="text/javascript">
export default {
  data () {
    return {
      btnText: ['显示代码', '显示代码', '显示代码', '显示代码', '显示代码'],
      isBoxShow: [false],
      isDivShow: [false]
    }
  },
  methods: {
    targetBtn (i) {
      this.$set(this.isDivShow, i, !this.isDivShow[i])
      if (this.isDivShow[i]) {
        this.$set(this.btnText, i, '隐藏代码')
      } else {
        this.$set(this.btnText, i, '显示代码')
      }
    },
    openBox (i) {
      this.$set(this.isBoxShow, i, true)
    },
    closeBox (i) {
      this.$set(this.isBoxShow, i, false)
    }
  }
}
</script>
